<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="person-infor">
      <div class="person-black" v-if="user.backgroundImage == null">
        <div class="person-bgImg">
          <img src="../assets/imgs/bgdefault.png" alt />
        </div>
        <div class="bgShadow"></div>
        <div class="tags">
          <div class="person-tag" @click="goFans(user.userId)">
            <div class="person-title">关注</div>
            <div class="person-num">{{ user.followCount }}</div>
          </div>
          <div class="person-tag fan" @click="goFans(user.userId, 1)">
            <div class="person-title">粉丝</div>
            <div class="person-num">{{ user.fansCount }}</div>
          </div>
          <div class="person-tag getFavor">
            <div class="person-title">获赞</div>
            <div class="person-num">{{ user.pointCount }}</div>
          </div>
        </div>
      </div>
      <div class="person-black" v-else>
        <div class="person-bgImg">
          <img :src="user.backgroundImage" alt />
        </div>
        <div class="bgShadow"></div>
        <div class="tags">
          <div class="person-tag" @click="goFans(user.userId)">
            <div class="person-title">关注</div>
            <div class="person-num">{{ user.followCount }}</div>
          </div>
          <div class="person-tag fan" @click="goFans(user.userId, 1)">
            <div class="person-title">粉丝</div>
            <div class="person-num">{{ user.fansCount }}</div>
          </div>
          <div class="person-tag getFavor">
            <div class="person-title">获赞</div>
            <div class="person-num">{{ user.pointCount }}</div>
          </div>
        </div>
      </div>

      <div class="person-white">
        <div class="person-header">
          <div class="header-id-img">
            <img :src="user.headImage" alt />
          </div>
          <div class="id-Icon" v-if="user.identity == 1">
            <img src="../assets/imgs/xhv.png" alt="" />
          </div>
          <div class="id-Icon" v-if="user.identity == 2">
            <img src="../assets/imgs/xlv.png" alt="" />
          </div>
          <div class="id-Icon" v-if="user.identity == 3">
            <img src="../assets/imgs/green.png" alt="" />
          </div>
        </div>
        <div class="person-name">{{ user.nickName }}</div>
        <div class="person-introduce">{{ user.introduce }}</div>
        <div
          class="concern"
          v-if="user.isFollow == 0"
          @click="concern(user.userId)"
        >
          关注
        </div>
        <div class="concern disable" v-else @click="concern(user.userId)">
          已关注
        </div>
      </div>
    </div>
    <div class="infor-content" v-show="ctnIndex == 0">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>
      <div class="infor-right" v-loading="loading">
        <div class="account">
          全部动态
          <span class="favor-num">{{ count }}</span>
        </div>
        <div v-if="res.articleShow">
          <div class="article" v-for="(item, index) in artList" :key="index">
            <div class="article-top">
              <div class="headerCtn">
                <div class="article-header" @click="goUp(item.articleUserid)">
                  <img :src="item.headImage" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 1">
                  <img src="../assets/imgs/xhv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 2">
                  <img src="../assets/imgs/xlv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.userIdentity == 3">
                  <img src="../assets/imgs/green.png" alt />
                </div>
              </div>
              <div class="article-right">
                <div class="article-name">
                  <span>{{ item.nickName }}</span>
                  <div class="stars" v-if="item.forward == 0">
                    <div
                      class="singleStar"
                      v-for="itemStar in item.stars"
                      :key="itemStar"
                    >
                      <img src="../assets/imgs/hb.png" alt />
                    </div>
                  </div>
                </div>
                <div class="article-date">{{ item.updateTime }}</div>
              </div>
              <div class="collect" @click="showCollect(item.articleId)">
                <img src="../assets/imgs/collect.png" alt />
              </div>
              <div
                class="collectModal"
                v-if="item.showCollect"
                @click="collect(item.articleId)"
              >
                <span v-if="item.isCollect == 0">添加到收藏</span>
                <span v-else>取消收藏</span>
              </div>
            </div>
            <div class="small-content" v-if="item.forward == 0">
              <div
                class="content-top"
                @click="jumpPage('artDetail', item.articleId)"
              >
                <div class="article-title">{{ item.articleTitle }}</div>
                <div class="article-content">{{ item.articleContent }}</div>
              </div>
              <viewer class="article-pic" v-if="item.show" :images="item.pic">
                <img
                  class="single-pic"
                  v-for="itemSon in item.pic"
                  :key="itemSon.index"
                  :src="itemSon"
                />
              </viewer>
              <div class="TagCtn">
                <div
                  class="articleTag TagModule"
                  @click="tagDetail(item.interest, item.articleInterestId)"
                >
                  #{{ item.interest }}
                </div>
                <SelectTag :talk="item.talk"></SelectTag>
              </div>
              <div class="article-btn">
                <div class="btn-single">
                  <div
                    class="btn-icon cupIcon"
                    @click="getFavor(item.articleId, item.articleUserid)"
                  >
                    <img src="../assets/imgs/dz.png" v-if="item.isPoint == 0" />
                    <img src="../assets/imgs/hz.png" v-else />
                  </div>
                  <div class="btn-number">{{ item.pointCount }}</div>
                </div>
                <div
                  class="btn-single"
                  @click="jumpPage('artDetail', item.articleId)"
                >
                  <div class="btn-icon detail">
                    <img src="../assets/imgs/hf.png" />
                  </div>
                  <div class="btn-number">{{ item.commentCount }}</div>
                </div>
                <div class="btn-single" @click="forwardBtn(item.articleId)">
                  <div class="btn-icon zhuanfa">
                    <img src="../assets/imgs/zf.png" />
                  </div>
                  <div class="btn-number">{{ item.forwardCount }}</div>
                </div>
                <div class="btn-single fenxiang">
                  <Copy :artId="item.articleId"></Copy>
                </div>
                <div class="reportBtn" @click="showReport(item.articleId)">
                  <div class="reportIcon">
                    <img src="../assets/imgs/jubaoIcon.png" alt />
                  </div>
                  <span class="reportText">举报</span>
                </div>
              </div>
            </div>
            <div class="small-content" v-else>
              <div class="forwardText" v-if="item.forwardContent != ''">
                {{ item.forwardContent }}
              </div>
              <div
                class="forwardCtn"
                @click="jumpPage('artDetail', item.getForwardArticleId)"
              >
                <div class="forwardImg">
                  <img :src="item.getForwardHeadImage" alt />
                </div>
                <div class="forwardTitle">{{ item.articleTitle }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="article noList" v-else>当前还没有内容哦~</div>
      </div>
    </div>
    <!-- 他赞过 -->
    <div class="infor-content" v-show="ctnIndex == 1">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>
      <div class="infor-right">
        <div class="account">
          赞过的贴子
          <span class="favor-num">{{ res.count }}</span>
        </div>
        <div class="talk-content" v-if="res.articleShow">
          <div
            class="talk-single"
            v-for="(item, index) in artList"
            :key="index"
          >
            <div class="talk-header">
              <div class="headerCtn">
                <div class="talk-img">
                  <img :src="item.headImage" alt />
                </div>
                <div class="fansIcon" v-if="item.identity == 1">
                  <img src="../assets/imgs/xhv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.identity == 2">
                  <img src="../assets/imgs/xlv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.identity == 3">
                  <img src="../assets/imgs/green.png" alt />
                </div>
              </div>
              <div class="talk-right">
                <div class="talk-name">{{ item.sendPointNickName }}</div>
                <div class="talk-date">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="favor-content">赞了这条帖子</div>
            <div class="reply" @click="jumpPage('artDetail', item.articleId)">
              <div class="reply-content">{{ item.articleTitle }}</div>
            </div>
          </div>
        </div>
        <div class="talk-content noList" v-else>当前还没有内容哦~</div>
      </div>
    </div>
    <div class="infor-content" v-show="ctnIndex == 2">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>
      <div class="infor-right">
        <div class="account">
          全部动态
          <span class="favor-num">{{ count }}</span>
        </div>
        <div class="talk-content" v-if="res.articleShow">
          <div
            class="talk-single"
            v-for="(item, index) in artList"
            :key="index"
          >
            <div class="talk-header">
              <div class="headerCtn">
                <div class="talk-img" @click="goUp(item.sendRewardId)">
                  <img :src="item.headImage" alt />
                </div>
                <div class="fansIcon" v-if="item.identity == 1">
                  <img src="../assets/imgs/xhv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.identity == 2">
                  <img src="../assets/imgs/xlv.png" alt />
                </div>
                <div class="fansIcon" v-if="item.identity == 3">
                  <img src="../assets/imgs/green.png" alt />
                </div>
              </div>
              <div class="talk-right">
                <div class="talk-name">{{ item.nickName }}</div>
                <div class="talk-date">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="favor-content">
              打赏了{{ item.number }}{{ item.rewardType }}
            </div>
            <div class="reply" @click="jumpPage('artDetail', item.articleId)">
              <div class="reply-content">{{ item.articleTitle }}</div>
            </div>
          </div>
        </div>
        <div class="talk-content noList" v-else>当前还没有内容哦~</div>
      </div>
    </div>
    <div class="paging" v-if="res.articleShow">
      <el-pagination
        layout="prev, pager, next"
        :total="count"
        :page-size="20"
        :background="true"
        :pager-count="7"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <Report ref="report" :reportId="reportId"></Report>

    <ForwardModal ref="forward" :listId="listId"></ForwardModal>
    <nav-footer ref="child"></nav-footer>
  </div>
</template>

<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
import ForwardModal from "../components/ForwardModal";
import Copy from "../components/Copy";
import Report from "../components/Report";
import SelectTag from "../components/SelectTag";
export default {
  data() {
    return {
      tags: [{ name: "来闻TA" }, { name: "TA赞过" }, { name: "荧光棒" }],
      defaultIndex: 0,
      ctnIndex: 0,
      list: [],
      user: "",
      artList: [],
      loading: true,
      id: 0,
      res: "",
      listId: 0,
      count: 0,
      reportId: 0,
    };
  },
  components: {
    Sidebar,
    NavHeader,
    NavFooter,
    ForwardModal,
    Copy,
    Report,
    SelectTag,
  },
  created() {
    //获取用户信息
    //
    this.id = this.$route.query.id;
    this.$fetch(`/laiwen/user/frontend/otheruser?userId=${this.id}`, {}).then(
      (res) => {
        console.log(res);
        this.user = res.user;
      }
    );
    this.init(`/user/frontend/laiwenta`, "list", 1);
  },
  methods: {
    init(url, listName, page) {
      console.log(this.ctnIndex);
      this.loading = true;
      this.$fetch(
        `/laiwen/${url}?page=${page}&limit=20&userId=${this.id}`,
        {}
      ).then((res) => {
        this.loading = false;
        this.totalPage = res.totalPages * 1;
        this.count = res.count * 1;
        this.res = res;
        this.$set(res, "articleShow", true);
        this.artList = res[listName];
        //处理图片为空的样式
        for (let i of this.artList.keys()) {
          this.$set(this.artList[i], "show", true);
          if (this.artList[i].articlePicture == "") {
            this.$set(this.artList[i], "show", false);
          }
          //处理图片数组
          let picArray = [];
          picArray = this.artList[i].articlePicture.split(",").filter((e) => e);
          if (picArray.length > 9) {
            picArray.length = 9;
          }
          this.$set(this.artList[i], "pic", picArray);
          //处理星星数组
          let len = this.artList[i].award + 1;
          if (len != null) {
            let stars = [];
            stars.length = len;
            this.$set(this.artList[i], "stars", stars);
          }
          //处理收藏模态窗
          this.$set(this.artList[i], "showCollect", false);
          //处理talk为空的情况
          this.$set(this.artList[i], "showTalk", true);
          if (this.artList[i].talk == null) {
            this.$set(this.artList[i], "showTalk", false);
          }
        }
        //list为空的样式处理
        if (this.artList.length == 0) {
          this.$set(res, "articleShow", false);
        }
        console.log(this.artList);
      });
    },
    showReport(id) {
      this.reportId = id;
      this.$refs.report.clear();
    },
    //接受子组件index
    getIndex(e) {
      this.ctnIndex = e;
      this.isSpecial = true;
      console.log(this.ctnIndex);
      if (e == 0) {
        this.init(`/user/frontend/laiwenta`, "list", 1);
      }
      if (e == 1) {
        this.init(`/user/frontend/tapoint`, "list", 1);
      }
      if (e > 1) {
        this.init(`/reward/frontend/olist`, "list", 1);
      }
    },
    //关注操作
    concern(id) {
      let that = this;
      if (!that.isConcern(id)) {
        return false;
      }
      that
        .$post(`/laiwen/follow/frontend/save?getFollowId=${id}`, {})
        .then((res) => {
          if (that.user.isFollow == 0) {
            this.$message({
              message: "亲亲关注成功哦",
              type: "success",
            });
            that.user.isFollow = 1;
          } else {
            this.$message({
              message: "亲亲取消关注了",
              type: "warning",
            });
            that.user.isFollow = 0;
          }
        });
    },
    //触发转发模态窗
    forwardBtn(e) {
      this.listId = e;
      this.$refs.forward.showModal();
    },
    //分页方法
    changePage(size) {
      let e = this.ctnIndex;
      if (e == 0) {
        this.init(`/user/frontend/laiwenta`, "list", size);
      }
      if (e == 1) {
        this.init(`/user/frontend/tapoint`, "list", size);
      }
      if (e > 1) {
        this.init(`/reward/frontend/olist`, "list", size);
      }
    },
    //点赞方法
    getFavor(articleId, userId) {
      let that = this;
      let favor = {};
      that.$set(favor, "articleId", articleId);
      that.$set(favor, "getPointId", userId);
      that.$post("/laiwen/point/frontend/save", favor).then((res) => {
        for (let i of that.artList.keys()) {
          if (articleId == that.artList[i].articleId) {
            if (that.artList[i].isPoint == 0) {
              this.$message({
                message: "点赞成功",
                type: "success",
              });
              that.artList[i].isPoint = 1;
              that.artList[i].pointCount += 1;
            } else {
              this.$message("取消点赞");
              that.artList[i].isPoint = 0;
              that.artList[i].pointCount -= 1;
            }
          }
        }
      });
    },
    jumpPage(path, id) {
      if (!this.tourist()) {
        return true;
      }
      this.navigate(path, id);
    },
    //粉丝
    goFans(id, index) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/fans",
        query: { id: id, index: index },
      });
    },
    //Up主页面
    goUp(id) {
      this.$router.push({
        path: "/home",
        query: { id: id },
      });
    },
    //展示收藏的模态窗
    showCollect(id) {
      let res = [...this.artList].find((item) => item.articleId == id);
      res.showCollect = !res.showCollect;
    },
    //专题详情
    tagDetail(name, id) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/tag",
        query: { name: `${name}`, id: `${id}` },
      });
    },
    //标签详情
    favorDetail(name) {
      if (!this.tourist()) {
        return true;
      }
      this.$router.push({
        path: "/favorTag",
        query: { name: `${name}` },
      });
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped src="../assets/css/home.css"></style>
